<template>
  <div id="content">
    <div class="topSearch">
      <p><span>订单号：<el-input size="small" style="width: 250px" v-model="params.orderNumber"
                             placeholder="请选择订单号" clearable></el-input></span></p>
      <p><span>地址：</span>
        <el-select size="small" v-model="params.parentCode" filterable clearable style="width: 250px"
                   placeholder="请选择门店地址">
          <el-option v-for="item in addressList" :label="item.name" :value="item.code" :key="item.code"></el-option>
        </el-select>
      </p>
      <p><span>门店：<el-input clearable size="small" style="width: 250px" placeholder="请输入门店名称"
                            v-model="params.storeName"></el-input></span></p>
      <p><span>状态：<el-select clearable v-model="params.status" style="width: 250px" size="small">
        <el-option v-for="item in status" :value="item.id" :label="item.name"></el-option>
      </el-select></span>
      </p>
      <p><span>时间： <el-date-picker clearable v-model="dateValue" size='small' type="daterange"
                                   range-separator="至"
                                   start-placeholder="开始日期"
                                   end-placeholder="结束日期" @change="chooseTime">
        </el-date-picker></span></p>
    </div>
    <div style="display: flex;justify-content: flex-end;margin-bottom: 10px">
      <p>
        <el-button size="small" type="primary" @click="_search">查 询</el-button>
        <!--        <el-button size="small" type="primary" @click="_export">导出报表</el-button>-->
      </p>
    </div>
    <div class="centerTable">
      <el-table :data="orderData" height="calc(100vh - 280px)" border stripe :cell-style="{ 'textAlign': 'center' }"
                :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
        <el-table-column prop="orderNumber" label="订单号" show-overflow-tooltip width="200px"></el-table-column>
        <el-table-column label="核销码">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.makeCode" :src="'https://'+scope.row.makeCode"
                      :preview-src-list="['https://'+scope.row.makeCode]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template v-slot:default="scope">
            <el-tag>{{ getStatusTag(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="门店名称" width="200px"></el-table-column>
        <el-table-column prop="address" label="地区" width="200px"></el-table-column>
        <el-table-column label="商品信息" width="350px">
          <template v-slot:default="scope">
            <el-table :data="scope.row.goodsInfo"
                      :cell-style="{ 'textAlign': 'center','fontSize': '12px', }"
                      :header-cell-style="{  'fontSize': '12px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }"
            >
              <el-table-column prop="goodsName" label="名称"></el-table-column>
              <el-table-column prop="amount" label="售价"></el-table-column>
              <el-table-column prop="count" label="数量"></el-table-column>
              <el-table-column label="商品图">
                <template v-slot:default="scope">
                  <el-image :src="'https://'+scope.row.goodsImg"
                            :preview-src-list="['https://'+scope.row.goodsImg]"></el-image>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="payableAmount" label="商品总价"></el-table-column>
        <el-table-column prop="actualAmount" label="实付"></el-table-column>
        <el-table-column prop="pointBalance" label="积点抵扣"></el-table-column>
        <el-table-column prop="couponMoney" label="优惠券抵扣"></el-table-column>
        <el-table-column label="使用余额">
          <template v-slot:default="scope">
            <span v-if="scope.row.payType==2">{{ scope.row.actualAmount }}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column prop="usePoint" label="赠送积点"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="支付方式" width="100px">
          <template v-slot:default="scope">
            <el-tag v-if="scope.row.payType==1">微信支付</el-tag>
            <el-tag v-if="scope.row.payType==2">余额支付</el-tag>
            <el-tag v-else>未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="o" label="操作" fixed="right">
          <template v-slot:default="scope">
            <el-link @click="_comfirmMake(scope.row)" style="margin-bottom: 10px" v-if="scope.row.status==2">确认订单</el-link>
            <el-link @click="_startMake(scope.row)" style="margin-bottom: 10px" v-if="scope.row.status==3">开始制作</el-link>
            <el-link @click="_finishMake(scope.row)" style="margin-bottom: 10px" v-if="scope.row.status==4">制作完成</el-link>
            <el-link @click="_code(scope.row)" v-if="scope.row.status==5">核销</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import addressList from "../../assets/js/address";
import dayjs from "dayjs";

export default {
  name: "orderList",
  meta: {title: "订单列表", icon: "el-icon-s-claim", sort: 2},
  data() {
    return {
      currentPage: 1,
      totalCount: 0,
      params: {
        pageNumber: 1,
        pageSize: 20
      },
      status: [
        {
          id: 0,
          name: "已取消"
        }, {
          id: 1,
          name: "待付款"
        }, {
          id: 2,
          name: "待接单"
        }, {
          id: 3,
          name: "待制作"
        }, {
          id: 4,
          name: "制作中"
        }, {
          id: 5,
          name: "待配送"
        }, {
          id: 6,
          name: "已完成"
        }, {
          id: 7,
          name: "售后"
        }, {
          id: 8,
          name: "已评价"
        },
      ],
      orderData:[],
      dateValue: "",
      addressList: addressList,
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    getStatusTag(val) {
      switch (val) {
        case 0:
          return '已取消';
        case 1:
          return '待付款';
        case 2:
          return '待接单';
        case 3:
          return '待制作';
        case 4:
          return '制作中';
        case 5:
          return '待配送';
        case 6:
          return '已完成';
        case 7:
          return '售后';
        case 8:
          return '已评价';
        default:
          return '未知';
      }
    },
    getOrderList() {
      this.$api.orderGetPCOrderList(this.params).then(res => {
        this.orderData = res.data
        this.totalCount = res.total
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getOrderList()
    },
    chooseTime(e) {
      this.params.startTime = dayjs(e[0]).format("YYYY-MM-DD");
      this.params.endTime = dayjs(e[1]).format("YYYY-MM-DD");
    },
    _search() {
      this.params.pageNumber = 1
      this.getOrderList()
    },
    _export() {

    },
    _startMake(val) {
      this.$confirm('开始制作？', '修改订单状态', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.orderConfirmStart({orderId: val.orderId}).then(res => {
          if (res == 1) {
            this.$message.success('操作成功！')
            this.getOrderList()
          }
        })
      }).catch();
    },
    _comfirmMake(val) {
      this.$confirm('确认接单？', '修改订单状态', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.orderConfirmOrder({orderId: val.orderId}).then(res => {
          if (res == 1) {
            this.$message.success('操作成功！')
            this.getOrderList()
          }
        })
      }).catch();
    },
    _finishMake(val) {
      this.$confirm('完成制作？', '修改订单状态', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.orderConfirmComplete({orderId: val.orderId}).then(res => {
          if (res == 1) {
            this.$message.success('操作成功！')
            this.getOrderList()
          }
        })
      }).catch();
    },
    _code(val) {
      this.$confirm('操作订单核销？', '修改订单状态', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.orderQRCode({orderNumber: val.orderNumber}).then(res => {
          if (res == 1) {
            this.$message.success('操作成功！')
            this.getOrderList()
          }
        })
      }).catch();
    },
  }
}
</script>

<style scoped>
.topSearch {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.el-link {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 8px;
}

.el-button {
  background-color: #303e9d;
  border: none;
}
</style>